
<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    设备
    <div id="container" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup lang="js">
import { onMounted } from 'vue'

onMounted(() => {
 initMap();
})
function initMap() {
  // 确保DOM元素已经渲染后再初始化地图
  setTimeout(() => {
    var map = new BMapGL.Map("container");
    // 设置地图中心点和缩放级别
    var point = new BMapGL.Point(116.404, 39.915); // 默认中心点为北京
    map.centerAndZoom(point, 15);
    // 启用滚轮缩放
    map.enableScrollWheelZoom(true);
  }, 100);
}

</script>

<style scoped lang="less">
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
}
</style>